/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
	<div class="system_c">
		<div class="warpper_title">管理中心</div>
		<div class="system_main">
			<el-row :gutter="24">
				<el-col :span="11">
					<div class="mb20 flex">
						<div class="main_left nflex number1">
							<div class="main_item">
								<div class="main_item1">
									<div class="mb10 font30">
										{{run_task_num}}
									</div>
									<div class="font14">调度中心运行的任务数量</div>
								</div>
							</div>
						</div>
						<div class="main_left ml20 nflex number2">
							<div class="main_item">
								<div class="main_item1">
									<div class="mb10 font30">
										{{triggered_num}}
									</div>
									<div class="font14">调度中心触发的调度次数</div>
								</div>
							</div>
						</div>
						<div class="main_left ml20 nflex number3">
							<div class="main_item">
								<div class="main_item1">
									<div class="mb10 font30">
										{{online_executor_num}}
									</div>
									<div class="font14">调度中心在线的执行器机器数量</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<div style="width: 50%;height: 400px;margin-top:30px;margin-right: 0px;">
				<v-chart :options="polar" theme="macarons" />
			</div>
			<div style="width: 50%;height: 400px;margin-top:-400px;margin-left: 0px;float: right;">
				<v-chart :options="option" theme="macarons" />
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getDateDistribution,
		getJobsSuccessRatio,
		getImportantNum
	} from "@/utils/api";

	import ECharts from "vue-echarts";
	import "echarts/theme/macarons.js";
	import "echarts/lib/chart/bar";
	import "echarts/lib/chart/line";
	import "echarts/lib/component/tooltip";
	import "echarts/lib/component/toolbox";
	import "echarts/lib/component/polar";
	import "echarts/lib/component/legend";
	export default {
		data() {
			return {
				polar: {
					title: {
						text: '日期分布图',
						left: 'auto'
					},
					tooltip: {
						trigger: "axis"
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ["line", "bar"]
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: true,
					legend: {
						data: ["失败", "成功"]
					},
					xAxis: [{
						type: "category",
						data: []
					}],
					yAxis: [{
						type: "value",
						// name: "金额",
						axisLabel: {
							formatter: "{value} "
						}
					}, ],
					series: [{
							name: "失败",
							type: "bar",
							data: []
						},
						{
							name: "成功",
							type: "line",
							data: []
						},
					]
				},
				option: {
					title: {
						text: '成功比例图',
						left: 'auto'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: 'right',
						data: ['成功', '失败']
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: [{
								value: 0,
								name: '成功'
							},
							{
								value: 0,
								name: '失败'
							}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				},
				run_task_num: null,
				triggered_num: null,
				online_executor_num: null
			};
		},
		components: {
			"v-chart": ECharts,
		},
		created() {
			this.getDateDistribution();
			this.getJobsSuccessRatio();
			this.getImportantNum();
		},
		methods: {
			getDateDistribution() {
				var that = this;
				getDateDistribution().then(function(res) {
					res.forEach(element => {
						that.polar.xAxis[0].data.push(element.at_date);
						that.polar.series[0].data.push(element.failed);
						that.polar.series[1].data.push(element.successful);
					});
				});
			},
			getJobsSuccessRatio() {
				var that  = this;
				getJobsSuccessRatio().then(function(res) {
					that.option.series[0].data[0].value = res.successful;
					that.option.series[0].data[1].value = res.failed;
				})
			},
			getImportantNum() {
				var that = this;
				getImportantNum().then(function(res) {
					that.run_task_num = res.run_task_num;
					that.triggered_num = res.triggered_num;
					that.online_executor_num = res.online_executor_num;
				})
			}
		}
	};
</script>

<style scoped>
	.ww100 {
		width: 50%;
	}

	.ww50 {
		width: 50%;
	}

	.font30 {
		font-size: 30px;
	}

	.font28 {
		font-size: 28px;
	}

	.font14 {
		font-size: 14px;
	}

	.flex {
		display: flex;
	}

	.nflex {
		display: flex;
		align-items: center;
	}

	.font_weight {
		font-weight: 600;
	}

	.mb20 {
		margin-bottom: 20px;
	}

	.mb10 {
		margin-bottom: 10px;
	}

	.ml20 {
		margin-left: 20px;
	}

	>>>.el-col-11 {
		width: 100%;
	}

	>>>.echarts {
		width: 100%;
		height: 300px;
	}

	.mainbox {
		overflow-x: hidden;
	}

	.warpper_title {
		height: 80px;
		line-height: 80px;
		border-bottom: 1px solid #e4eaec;
		font-size: 24px;
		color: #202020;
		font-weight: 600;
		padding: 0 20px;
	}

	.system_c {
		padding-bottom: 100px;
	}

	.system_c .system_main {
		padding: 20px 15px 20px 18px;
	}

	.system_c .main_left {
		width: calc(50% - 10px);
		height: 130px;
		border-radius: 5px;
		color: #fff;
	}

	.system_c .main_left .main_item {
		width: 100%;
		height: 80px;
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
	}

	.system_c .main_left .main_item1 {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.system_c .main_left.number1 {
		background: #8693f3;
	}

	.system_c .main_left.number2 {
		background: #66a6ff;
	}
	
	.system_c .main_left.number3 {
		background: #3dcc85;
	}
</style>
